<template>
  <PageCard title="网络剪贴板">
    <n-tabs
      v-model:value="activeTab"
      type="card"
      closable
      addable
      @close="handleCloseTab"
      @add="handleAddTab"
    >
      <!-- 新建剪切板标签页（固定，第一个） -->
      <n-tab-pane name="create" tab="新建剪贴板" :closable="false">
        <ClipboardTab :tab-id="'create'" :is-create="true" />
      </n-tab-pane>

      <!-- 访问剪切板标签页（固定，第二个） -->
      <n-tab-pane name="access" tab="访问剪贴板" :closable="false">
        <ClipboardAccess ref="accessRef" @open-tab="handleOpenTab" />
      </n-tab-pane>

      <!-- 动态剪贴板标签页 -->
      <n-tab-pane
        v-for="tab in clipboardTabs"
        :key="tab.id"
        :name="tab.id"
        :tab="tab.title"
        :closable="true"
      >
        <ClipboardTab
          :tab-id="tab.id"
          :share-id="tab.shareId"
          :is-create="tab.isCreate"
          @update:title="(title) => updateTabTitle(tab.id, title)"
          @close="() => handleCloseTab(tab.id)"
        />
      </n-tab-pane>
    </n-tabs>

    <!-- 使用说明 -->
    <n-divider />
    <UsageGuide
      :title="usageGuideConfig.title"
      :steps="usageGuideConfig.steps"
      :tips="usageGuideConfig.tips"
      :example="usageGuideConfig.example"
    />
  </PageCard>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { useMessage } from 'naive-ui'
import PageCard from '@/components/PageCard.vue'
import UsageGuide from '@/components/UsageGuide.vue'
import ClipboardAccess from './components/ClipboardAccess.vue'
import ClipboardTab from './components/ClipboardTab.vue'
import { clipboardStorage } from './utils/clipboardStorage'

interface TabInfo {
  id: string
  title: string
  shareId?: string
  isCreate?: boolean
}

const route = useRoute()
const message = useMessage()

// 访问组件引用
const accessRef = ref<InstanceType<typeof ClipboardAccess>>()

// 当前激活的标签页
const activeTab = ref('create')

// 剪贴板标签页列表（不包含固定的新建和访问tab）
const clipboardTabs = ref<TabInfo[]>([])

// 标签页ID计数器
let tabIdCounter = 0

// 生成标签页ID
const generateTabId = (): string => {
  return `tab_${Date.now()}_${++tabIdCounter}`
}

// 添加新标签页（创建新剪贴板）
const handleAddTab = () => {
  const newTab: TabInfo = {
    id: generateTabId(),
    title: '新建剪贴板',
    isCreate: true
  }
  clipboardTabs.value.push(newTab)
  activeTab.value = newTab.id
}

// 打开标签页（访问已有剪贴板）
const handleOpenTab = async (shareId: string, skipPasswordCheck = false) => {
  // 检查是否已经打开
  const existingTab = clipboardTabs.value.find(tab => tab.shareId === shareId)
  if (existingTab) {
    activeTab.value = existingTab.id
    message.info('该剪贴板已在标签页中打开')
    return
  }

  // 如果跳过密码检查（免密码访问），预先在IndexedDB中保存记录
  if (skipPasswordCheck) {
    try {
      const { clipboardStorage } = await import('./utils/clipboardStorage')
      await clipboardStorage.saveClipboard({
        shareId: shareId,
        title: shareId,
        createdAt: Date.now(),
        lastAccessAt: Date.now(),
        isAdmin: false
      })
    } catch (error) {
      console.error('保存免密码访问记录失败:', error)
    }
  }

  // 创建新标签页
  const newTab: TabInfo = {
    id: generateTabId(),
    title: shareId,
    shareId
  }
  clipboardTabs.value.push(newTab)
  activeTab.value = newTab.id
}

// 更新标签页标题
const updateTabTitle = (tabId: string, title: string) => {
  const tab = clipboardTabs.value.find(t => t.id === tabId)
  if (tab) {
    tab.title = title
  }
}

// 关闭标签页
const handleCloseTab = (tabId: string) => {
  // 不允许关闭固定的新建和访问页面
  if (tabId === 'create' || tabId === 'access') {
    return
  }

  const index = clipboardTabs.value.findIndex(tab => tab.id === tabId)
  if (index !== -1) {
    clipboardTabs.value.splice(index, 1)

    // 如果关闭的是当前标签页，切换到新建页面
    if (activeTab.value === tabId) {
      activeTab.value = 'create'
    }
  }
}

// 使用说明配置
const usageGuideConfig = {
  title: '使用说明',
  steps: [
    '创建剪贴板：点击"+"按钮创建新剪贴板，输入内容并设置选项',
    '访问剪贴板：在访问页面输入分享ID和密码，点击访问即可打开',
    '多标签管理：支持同时管理多个剪贴板，每个标签页独立运行',
    '历史记录：系统会自动保存访问记录，方便快速访问',
    '管理功能：使用管理员密码可以修改设置、延长时间等'
  ],
  tips: [
    '剪贴板支持设置访问密码、过期时间和访问次数限制',
    '所有访问记录都保存在本地，清除浏览器数据会丢失',
    '可以同时打开多个剪贴板进行对比和管理',
    '标签页会显示分享ID，方便识别不同的剪贴板'
  ],
  example: '适用于临时分享文本、代码片段、配置文件等内容'
}

// 处理剪切板创建事件
const handleClipboardCreated = (event: CustomEvent) => {
  const { shareId } = event.detail
  // 创建剪切板后打开新tab，密码已保存在IndexedDB中
  handleOpenTab(shareId)
}

// 处理通过链接访问的逻辑
const handleLinkAccess = async (shareId: string) => {
  try {
    // 导入 checkPasswordFree API
    const { checkPasswordFree } = await import('@/api/utility/clipboard')

    // 检查是否免密码访问
    const isPasswordFree = await checkPasswordFree({ shareId })

    if (isPasswordFree) {
      // 免密码访问，直接打开标签页
      message.info('检测到免密码访问，直接进入剪贴板')
      await handleOpenTab(shareId, true)
      return
    }
  } catch (error) {
    console.error('检查密码免费访问失败:', error)
  }

  // 需要密码访问，切换到访问页面并填充shareId
  activeTab.value = 'access'
  await nextTick()
  accessRef.value?.setShareId(shareId)
}

// 初始化
onMounted(async () => {
  // 初始化存储
  await clipboardStorage.init()

  // 监听剪切板创建事件
  window.addEventListener('clipboard-created', handleClipboardCreated)

  // 处理URL参数
  const urlParams = new URLSearchParams(window.location.search)
  const shareId = urlParams.get('shareId')

  if (shareId) {
    await handleLinkAccess(shareId)
  }
})

// 清理事件监听器
onUnmounted(() => {
  window.removeEventListener('clipboard-created', handleClipboardCreated)
})
</script>

<style scoped lang="less">
:deep(.n-tabs) {
  .n-tabs-nav {
    margin-bottom: 0;
  }

  .n-tab-pane {
    padding-top: 0;
  }
}

@media (max-width: 768px) {
  :deep(.n-tabs) {
    .n-tabs-tab {
      padding: 0 12px;
      font-size: 14px;
    }
  }
}
</style>
